<template>
    <div class="netteach-video " v-loading="loading">
        <div class="netteach-crumbs">
            <router-link to="/netteach">网络教研</router-link>
            <span @click="goBack"><i>></i>{{scoreDetail.name}} </span>
            <!-- <span><i>></i>查看</span> -->
        </div>
        <div class="netteach-video-bpx">
            <h3>{{scoreDetail.name}}</h3>
            <div class="netteach-video-user">
                <a><img :src="BASE_URL + scoreDetail.avatar_path"></a>
                <div>
                    <p>{{scoreDetail.user_name}}</p>
                    <p>{{scoreDetail.create_time}}</p>
                </div>
                <div class="i_activitySt">
                    <template v-if="scoreDetail.status === 0">
                        <span>{{scoreDetail.total_average_score}}</span>
                        <i class="ipng pingke02"></i>
                    </template>
                </div>
            </div>
            <div class="netteach-video-play">
                <videoAlertView v-if="showVideoPlayer" ref="video" class="train-video-player" :playParam.sync="playParam"></videoAlertView>
            </div>
        </div>

        <div class="details-video">
            <!-- <h3>评课视频</h3> -->
            <swiper :options="swiperOption"  >
                 <swiper-slide v-for="(video, index) in videoList" :key="index" class='groupLs-video'>
                        <div class="i-groupLs">
                            <div class="i-groupLs-img">
                               <a @click="setPlayVodeo(video)"><img :src="BASE_URL + video.picture" /></a>
                            </div>

                            <div class="i-groupLs-if">
                                <a @click="setPlayVodeo(video)">{{video.video_name}}</a>
                                <div class="i-groupLs-info clear">
                                    <a >
                                        <img class="acatar-img" :src="BASE_URL + video.avatar_path">
                                        <span>{{video.user_name}}</span>
                                    </a>
                                    <div class="fr">
                                        <i class="ipng playi"></i>
                                        <strong>{{video.clicks}}</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                 </swiper-slide>
                 <div class="swiper-pagination" slot="pagination" v-show="videoList.length > 3"></div>
                 <div class="swiper-button-prev" slot="button-prev" v-show="videoList.length > 3"></div>
                 <div class="swiper-button-next" slot="button-next" v-show="videoList.length > 3"></div>
           </swiper>
        </div>

        <div class="netteach-video-txt">
            <div class="netteach-video-txt-h">
                <span>{{totalSum}}条评论</span>
                <template v-if="scoreDetail.status != 0">
                    <el-button type="primary" @click="viewCriteriaShow(scoreDetail.standard_id)" v-if="scoreDetail.is_commit == 0 ">参与评分</el-button>
                </template>
                
            </div>
            <ul >
                <li class="netteach-comment" v-for="(item, index) of commentList" :key="index">
                    <div class="netteach-comment-l">
                        <img :src="BASE_URL + item.avatar_path">
                    </div>

                    <div class="netteach-comment-r">
                        <div class="netteach-comment-r-t clear">
                            <strong>{{item.user_name}}</strong>
                            <span>&nbsp;&nbsp;&nbsp;{{item.platform_name}}&nbsp;&nbsp;&nbsp;</span>
                            <span>{{item.create_time}}</span>
                            <div class="netteach-txt-op fr" >
                                <i class="el-icon-tickets" @click=" markingScore(item)" v-if="userArray.includes($g.user_id)" title="查看评分明细项"></i>
                                <template v-if="item.create_id == $g.user_id">
                                   <!--  <i class="ipng but_edit01 i_editBt" @click="editoriaReview(item)" title="编辑"></i>
                                    <i class="ipng but_del i_editDl"  @click="deldeteComment()" title="删除"></i> -->
                                   
                                    <i class="el-icon-edit" title="编辑" @click="editoriaReview(item)" ></i>
                                    <i class="el-icon-delete" title="删除"  @click="deldeteComment()"></i>
                                </template>

                                <span>
                                    <i>{{item.sum_score}}</i>分
                                </span>
                            </div>
                        </div>
                        <div class="netteach-commen-cont" v-html="item.comment"></div>
                    </div>
                </li>
            </ul>

            <el-pagination v-if="totalSum > pageSize"
                  @size-change="sizeChange"
                  @current-change="currentChange"
                  :current-page="pageIndex"
                  :page-sizes="[10, 50,100, 200, 300, 400]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalSum">
                </el-pagination>
        </div>

        <el-dialog title="查看评分标准" :visible.sync="viewCriteria" width="800px" :close-on-click-modal="false">
            <div class="substandard-title">
                <span>制作人: {{viewCriteriaList.user_name}}</span>
                <span>满分: {{viewCriteriaList.total_score}}</span>
            </div>
            <template>
                <table class="standard-item">
                    <tr>
                        <th>项目</th>
                        <th>评价内容</th>
                         <th>分数</th>
                        <th>评分</th>
                    </tr>
                    <template v-for="(item, index) of viewCriteriaList.standard_item">
                        <template v-if="item.child.length === 0">
                            <tr>
                                <td>{{item.name}}</td>
                                <td>--</td>
                                <td width="80px">{{item.score}}</td>
                                <td width="60px"><el-input-number v-model="item.number" :controls="false"  :min="0" :max="item.score"></el-input-number></td>
                            </tr>
                        </template>
                        <template v-else>
                            <tr v-for="(child, index2) of item.child">
                                <td :rowspan="item.child.length" v-if="index2 === 0">{{item.name}}</td>
                                <td>{{child.name}}</td>
                                <td width="80px">{{child.score}}</td>
                                <td width="60px"><el-input-number v-model="child.number" :controls="false"  :min="0" :max="child.score"></el-input-number></td>
                            </tr>
                        </template>
                    </template>
                </table>
            </template>
            <div class="textarea-box">
                <el-input type="textarea" :rows="5"  placeholder="输入你想说的话…,不超过200个字符" v-model="textarea" maxlength="200" resize="none"></el-input>
                <span><i>{{textarea.length}}</i>/200</span>
            </div>

            <div class="textarea-btn">
                <el-button type="primary" @click="preservation()">保存</el-button>
            </div>
           
        </el-dialog>

        <el-dialog title="评分详情" :visible.sync="viewCriteria2" width="800px" :close-on-click-modal="false">
            <div class="substandard-title">
                <span>制作人: {{userInfo.user_name}}</span>
                <span>满分: {{userInfo.total_score}}</span>
                 <span>评分: {{sumScore}}</span>
            </div>
            <template>
                <table class="standard-item">
                    <tr>
                        <th>项目</th>
                        <th>评价内容</th>
                         <th>分数</th>
                        <th>评分</th>
                    </tr>
                    <template v-for="(item, index) of userInfo.standard_item">
                        <template v-if="item.child.length === 0">
                            <tr>
                                <td>{{item.name}}</td>
                                <td>--</td>
                                <td width="80px">{{item.score}}</td>
                                <!-- <template v-for="node of userScore"> -->
                                <td  width="60px">{{userScore[item.id]}}</td>
                                <!-- </template> -->
                                
                            </tr>
                        </template>
                        <template v-else>
                            <tr v-for="(child, index2) of item.child">
                                <td :rowspan="item.child.length" v-if="index2 === 0">{{item.name}}</td>
                                <td>{{child.name}}</td>
                                <td width="80px">{{child.score}}</td>
                                <td width="60px">{{userScore[child.id]}}</td>
                            </tr>
                        </template>
                    </template>
                </table>
            </template>

           
        </el-dialog>

        <el-dialog
          title="编辑评论"
          :close-on-click-modal="false"
          :visible.sync="editoriaVisible"
           custom-class="visibleBox" 
          width="500px">
            <div class="editoria-box">
                <el-input type="textarea"  :rows="6" resize="none"  placeholder="请输入内容" v-model="commentVal" maxlength="200"></el-input>
                <span><i>{{commentVal.length}}</i>/200</span>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editoriaVisible = false" type="primary" plain>取 消</el-button>
                <el-button type="primary" @click="setComment()">确 定</el-button>
              </span>
        </el-dialog>
    </div>
</template>
<script>

    import videoAlertView from "../../common/nativeVideo.vue";
    export default {
        components: {
            videoAlertView
        },
        data() {
            return {
                showVideoPlayer: false,
                playParam: { play_url: "" },
                videoList: [],
                scoreDetail: {},
                commentList: [],
                totalSum: 0,
                pageIndex: 1,
                pageSize: 10,
                viewCriteria: false,
                viewCriteria2: false,
                viewCriteriaList: {},
                textarea: '',
                editoriaVisible: false,
                commentVal: '',
                swiperOption: {
                   slidesPerView: 4,
                   spaceBetween: 30,
                   slidesPerGroup: 3,
                   loop: true,
                   loopFillGroupWithBlank: true,
                   pagination: {
                       el: '.swiper-pagination',
                       clickable: true
                   },
                   navigation: {
                       nextEl: '.swiper-button-next',
                       prevEl: '.swiper-button-prev'
                   }
               },
               userArray: [],
               userInfo: {},
               userScore: [],
               sumScore: 0,
               seeOther: 0,
               loading: true
            }
        },
        created(){
            
        },
        computed: {

        },
        mounted(){
            this.$nextTick(()=>{
                this.getDetailsVideo()
                this.getScoreDetail()
                this.getComment()
            })
        },
	    methods: {

            videoClick(id){
                let success = (res)=>{
                    this.getDetailsVideo();
                }
                let data = {video_id: id};
                this.$ajax.post("/api/video/video_click", data, {func: {success: success}})
            },
            /**
             * 查看评分
             * @DateTime 2019-09-05T16:33:08+0800
             * @param    {[type]}                 obj [description]
             * @return   {[type]}                     [description]
             */
            markingScore(obj){

                if (this.seeOther != 1) {
                    return this.$message.error('没有查看资格')
                }

                 this.viewCriteria2 = true;
                 this.sumScore = obj.sum_score
                 let success = (res=>{
                    this.userInfo = res.data.standard_detail;
                    this.userScore = res.data.user_score;
                 })

                 this.$ajax({
                     url: 'api/network/eva_score_detail_view',
                     method: 'get',
                     params: { userid: obj.create_id ,eva_id: this.$route.query.id},
                     func: { success: success }
                 })
            },
           /**
            * 提交评论
            * @author lucky
            * @DateTime 2019-07-17T15:01:06+0800
            * @return   {[type]}                 [description]
            */
            preservation(){
                if (is_empty(this.textarea)) {
                    return this.$message.error('输入框不能为空')
                };
                let [sumScore, id] = [ [] , '']

                for (let i = 0; i < this.viewCriteriaList.standard_item.length; i++) {
                    
                    if (this.viewCriteriaList.standard_item[i].child.length === 0) {
                        id = 'item_'+ this.viewCriteriaList.standard_item[i].id
                        sumScore[id] = (this.viewCriteriaList.standard_item[i].number) 
                    }else{
                        for (let j = 0; j < this.viewCriteriaList.standard_item[i].child.length; j++) {
                            id = 'item_'+ this.viewCriteriaList.standard_item[i].child[j].id
                            sumScore[id] = (this.viewCriteriaList.standard_item[i].child[j].number)
                        }
                    }
                }

                let success = (res=>{
                    this.$message.success(res.msg)
                    this.viewCriteria = false
                    this.textarea = '';
                    this.getComment()
                    this.getScoreDetail()
                });
                let params = {
                    userid: this.$g.user_id,
                    eva_id: this.$route.query.id,
                    comment: this.textarea,
                    arr: sumScore
                }
                this.$ajax.post('api/network/eva_scroe_submit', params, {func: {success: success}})
            },
            /**
             * 添加一个自定义键值
             * @param  {[type]} id [description]
             * @return {[type]}    [description]
             */
            viewCriteriaShow(id) {

                this.viewCriteria = true;

                let success = (res => {
                    this.viewCriteriaList = res.data;
                    this.getComment()
                    for (let i = 0; i < this.viewCriteriaList.standard_item.length; i++) {
                        if (this.viewCriteriaList.standard_item[i].child.length === 0) {
                            this.viewCriteriaList.standard_item[i].number = 0
                        }else{
                            for (let j = 0; j < this.viewCriteriaList.standard_item[i].child.length; j++) {
                                this.viewCriteriaList.standard_item[i].child[j].number = 0;
                            }
                        }
                    }
                    this.getScoreDetail()

                });

                this.$ajax({
                    url: 'api/network/standard_detail',
                    method: 'get',
                    params: { id: id },
                    func: { success: success }
                })
            },
            goBack() {
                this.$router.back(-1)
            },
            /*
                获取当前页面的数据
            */
            getScoreDetail(){
                let success = (res=>{
                    this.scoreDetail = res.data;

                    if (this.scoreDetail.can_see_other == 1) {
                        this.seeOther = this.scoreDetail.can_see_other;
                    }

                    this.userArray = []
                    for (var i = 0; i < this.scoreDetail.users.length; i++) {
                       this.userArray.push( this.scoreDetail.users[i].id)
                    }

                    this.loading = false
                    
                });

                let fail = (res=>{
                    this.$message.error(res.msg);
                    this.loading = false
                })

                this.$ajax({
                    url: 'api/network/eva_detail',
                    method: 'get',
                    params: {id: this.$route.query.id, userid: this.$g.user_id},
                    func: {success: success, fail: fail}
                })
            },
            /*
                请求获取评课的视频列表
            */
            getDetailsVideo(){
                let success = (res=>{
                    if (res.data) {
                        this.videoList = res.data;
                        if(this.playParam.play_url === ''){//只有初始化的时候，赋值给播放器。避免增加点击数的时候，刷新点击数的同时，又改变了视频url
                            this.videoList.map(x => {
                                if(x.id == this.$route.query.vid){
                                    this.playParam.play_url = this.BASE_URL + '/' + x.path;
                                    this.showVideoPlayer = true;
                                }
                            })
                        }
                    }
                });

                this.$ajax({
                    url: 'api/network/eva_video',
                    method: 'get',
                    params: {
                        eva_id: this.$route.query.id,
                        userid: this.$g.user_id,
                        page_index: 1,
                        page_size: 0
                    },
                    func: {success: success}
                })
            },
            /*
                请求获取评课的评论
            */
            getComment(){
                let success = (res=>{
                    this.commentList = res.data.data;
                    this.pageIndex = parseInt(res.data.page_index);
                    this.totalSum = parseInt(res.data.data_sum)
                });
                this.$ajax({
                    url: 'api/network/eva_score_user_data',
                    method: 'get',
                    params: {
                        id: this.$route.query.id,
                        page_index: this.pageIndex,
                        page_size: this.pageSize
                    },
                    func: {success: success}
                })
            },
            sizeChange(val) {
                this.pageSize = val;
                this.getComment()
            },
            currentChange(val) {
                this.pageIndex = val;
                 this.getComment()
            },
            /**
             * 播放视频
             */
            setPlayVodeo(obj){
                this.playParam.play_url = this.BASE_URL + '/' + obj.path;
                this.showVideoPlayer = true
                this.videoClick(obj.id)
            },
            /**
             * 删除评论信息
             */
            deldeteComment(){
                this.$confirm('确定删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    customClass: 'confirm-them',
                }).then(() => {

                    let success = (res=>{
                        this.$message.success(res.msg);
                        this.getComment()
                        this.getScoreDetail()
                    })
                
                    this.$ajax({
                        url: 'api/network/eva_scroe_submit',
                        method: 'delete',
                        params: {
                            userid: this.$g.user_id,
                            eva_id: this.$route.query.id
                        },
                        func: {success: success}
                    })
                }).catch(() => {});
            },
            /**
             * 编辑评论
             */
            editoriaReview(obj){
                this.editoriaVisible = true
                this.commentVal = obj.comment;
            },
            /**
             * 修改评论
             */
            setComment(){

                if (is_empty(this.commentVal)) {
                    return this.$message.error('输入框不能为空')
                };
                let success = (res=>{
                    this.$message.success(res.msg);
                    this.editoriaVisible = false;
                    this.getComment()
                });

                let params = {
                    userid: this.$g.user_id,
                    eva_id: this.$route.query.id,
                    comment: this.commentVal
                };

                this.$ajax.put('api/network/eva_scroe_submit', params, {func: {success: success}})
            }

        }
    }

</script>
<style lang="scss"></style>